import zrender from '../../lib/zrender'
import store from '../../utils/store'
import * as zrhelper from '../../lib/zrender-helper';
import {
    transformByWidth
} from "../../utils/util";
import CommandType from "../../enum/command-type";
import dayjs from "dayjs";
import {secondTransformMinute} from "../../utils/date";
import { getItem } from '../../utils/store'
const app = getApp()
const clientApi = app.ClientApi
const clientGet = app.clientGet
//获取应用实例
let zr = null;
let fr = null;
const zhi = new zrender.Group();
const fu = new zrender.Group()

// 获取手机屏幕宽度为canvas画布赋值，达到动态更新canvas画布的宽度 √
// 因为PC端的尺寸是固定写死的，所以这边暂时也按照 1180来计算，达到布局显示正常的效果 √
// 使用zrender来绘制，和PC端保持一致，两个画布，分为直视图和俯视图两种（机头包含在直视图中） √
// 先将静态的两个图绘制出来，看看布局效果是否错乱？√
// 接受外部传进来的数据，监听数据的变化，调用绘图方法，动态绘制俯视图，利用websocket，达到动画的效果 √
// 接受外部传进来的数据，监听数据的变化，调用绘图方法，动态绘制直视图，利用websocket，达到动画的效果 √
// 接受外部传进来的数据，监听数据的变化，调用绘图方法，动态绘制机头，利用websocket，达到动画的效果 √
// 动态绘制的时候依赖的一些数据现在是写死的，应该通过接口来获取到，然后赋值给我们的data

Component({
    properties: {
        materialDetail: {
            type: Object,
            value: {}
        },
        isFault: {
            type: Boolean,
            value: false
        },
        faultMessage: {
            type: String,
            value: ''
        }
    },
    data: {
        currMaterialName: '', //当前正在装的物料名称
        taiObjList: [],
        taiTimeOut: 0,  // 台时区间
        moreTaiTime: 0,  // 最高台时（吨/小时）
        orderData: {}, // 订单信息
        trueWuMessage: {}, // 物料信息
        car: {}, // 车辆信息
        canvasWidth: 0, // 画布宽度
        canvasHeight: 0, // 画布高度
        weiX: 4500,
        weiY: 550,
        multiple: 15,  // 缩放比例
        carriage: 1100, // 车轮直径
        cHeight: 5100, // 高度
        taskMessage: {}, // 订单信息
        isEnd: false,  // 是否已经装车完毕
        allList: [],  // 已装的水泥包
        beginTime: '',  // 开始时间
        endTime: '', // 结束时间
        orderCount: 0,  // 订单数量
        loadedCount: 0,  // 已装数量
        when: ''  // 开始到结束 用时多少  分钟为单位
    },
    observers: {
        'materialDetail': async function (materialDetail) {
            if (materialDetail && materialDetail.count > 0) {
                // store.setItem('materialDetail', materialDetail)
                this.drawPlanMaterial(materialDetail)
                this.drawDirectMaterial(materialDetail)
                this.drawMachineHead(materialDetail)
            }

        }
    },
    methods: {
        // 初始化
        async init() {
                this.getSystemSetWidth()
                await this.getCarInfo()
                await this.getLaneStatus()
                await this.getCurrentMat()
                await this.getTaskMessage()
                this.getLoadedCount()
                if (this.data.allList.length > 0) {
                    let list = this.data.allList.sort((a, b) => a.count - b.count);
                    list.forEach(val => {
                        this.drawPlanMaterial(val);
                        this.drawDirectMaterial(val);
                    });
                    let lastOne = this.data.allList.sort((a, b) => b.count - a.count)[0];
                    this.drawMachineHead(lastOne);
                    this.setData({
                        orderCount: lastOne.countPage,
                        loadedCount: lastOne.count
                    })
                }
                this.drawDirectViewImage()
                this.drawPlanform()
                await this.getTaiTime()
                this.startInterval()
        },
        async getLoadedCount() {
            const factoryId = store.getItem("factoryId")
            const laneId = store.getItem('laneId')
            const res = await clientGet(`${clientApi.getLoaded}/factoryId/${factoryId}/laneId/${laneId}`)
            if (res.length > 0) {
                let list = res.sort((a, b) => a.count - b.count);
                list.forEach(val => {
                    this.drawPlanMaterial(val);
                    this.drawDirectMaterial(val);
                });
            }
        },
        color(layer, option) {
            if (layer % 2 === 0) {
                if (option) {
                    return "rgba(32,245,255,0.7)";
                } else {
                    return "rgba(32,245,255,0.7)";
                }
            } else {
                if (option) {
                    return "rgba(58,255,109,0.7)";
                } else {
                    return "rgba(32,236,125,0.7)";
                }
            }
        },
        async getCarInfo() {
            const factoryId = store.getItem("factoryId")
            const laneId = store.getItem('laneId')
            const carInfo = await clientGet(`${clientApi.getCar}/factoryId/${factoryId}/laneId/${laneId}`)
            this.setData({car: carInfo})
            if (this.data.car.width >= 3500) {
                this.setData({
                    multiple: 17,
                    cHeight2: 4800
                })
            } else if (this.data.car.width>= 3000 && this.data.car.width < 3500) {
                this.setData({
                    multiple: 16.5,
                    cHeight2: 4300
                })
            }
            if (this.data.car.headerHeight > 3000) {
                this.setData({
                    multiple: 18,
                    cHeight: 5500
                })
            }
            if (this.data.car.bottomHeight < 1000) {
                this.setData({
                    carriage: this.data.car.bottomHeight
                })
            }
        },
        // 获取订单信息并返回
        async getOrder() {
            const factoryId = store.getItem("factoryId")
            const laneId = store.getItem('laneId')
            const orderData = await clientGet(`${clientApi.getOrderByLaneId}/factoryId/${factoryId}/laneId/${laneId}`)
            console.log('materials', orderData)
            return orderData
        },
        async getCurrentMat() {
            let currentMaterial = {}
            const orderData = await this.getOrder()
            const materials = await this.getTrueWuMessage()
            this.setData({
                orderData
            })
            if (Array.isArray(orderData.materials)) {
                for (let i = 0; i < materials.length; i++) {
                    for (let j = 0; j < orderData.materials.length; j++) {
                        if (materials[i].id === orderData.materials[j].materialId) {
                            currentMaterial = materials[i]
                        }
                    }
                }
                this.setData({
                    trueWuMessage: currentMaterial
                })
            } else {
                currentMaterial = materials.find((material) => {
                    return material.id === orderData.materialId
                })
                this.setData({
                    trueWuMessage: currentMaterial
                })
            }


        },
        // 获取物料信息
        async getTrueWuMessage() {
            const factoryId = store.getItem("factoryId")
            const materials = await clientGet(`${clientApi.getMaterialList}/factoryId/${factoryId}`)
            return materials
        },
        async getPositionByCount(count) {
            const factoryId = store.getItem("factoryId")
            const laneId = store.getItem('laneId')
            const res = await clientGet(`${clientApi.getPositionByCount}/${laneId}/0/${count + 1}/factoryId/${factoryId}`)
            this.setData({
                allList: res
            })
        },
        // 获取当前车道的状态信息
        async getLaneStatus() {
            const factoryId = store.getItem("factoryId")
            const laneId = store.getItem('laneId')
            // 当我们渲染组件的时候，我们应该判断当前车道的状态，如果是正在装车，我们让他继续进行
            // 如果是已完成状态，我们就要将所有装好的包画出来（包通过http请求获取到）
            // 如果是正在装车，那么我们应该将已经装过的包通过http请求获取到并且绘制出来
            const laneStatusRes = await clientGet(`${clientApi.getLaneStatusById}/factoryId/${factoryId}/laneId/${laneId}`)
            const COMMAND = laneStatusRes[0].command
            if (COMMAND === CommandType.NOTIFY_COMMAND_LOADING_COUNT ) {
                if (laneStatusRes[0].message&&laneStatusRes[0].message.count) {
                    await this.getPositionByCount(laneStatusRes[0].message.count)
                }
            }
            // 完成状态
            if (COMMAND === CommandType.NOTIFY_COMMAND_LOADING_COMPLETE) {
                this.triggerEvent('activeChange', 4)
                const positionRes = await clientGet(`${clientApi.getPositionByLaneId}/factoryId/${factoryId}/laneId/${laneId}`)
                this.setData({
                    allList: positionRes
                })
                if (this.data.allList.length > 0) {
                    let list = this.data.allList.sort((a, b) => a.count - b.count);
                    list.forEach(val => {
                        this.drawPlanMaterial(val);
                        this.drawDirectMaterial(val);
                    });
                    let lastOne = this.data.allList.sort((a, b) => b.count - a.count)[0];
                    this.drawMachineHead(lastOne);
                    this.setData({
                        orderCount: lastOne.countPage,
                        loadedCount: lastOne.count
                    })
                }
                const {begin, end} = laneStatusRes[0].message
                let beginTime =  dayjs(begin).format('YYYY-MM-DD HH:mm:ss')
                let endTime = dayjs(end).format('YYYY-MM-DD HH:mm:ss')
                const diffSceond = dayjs(endTime).diff(dayjs(beginTime), 'second')
                const when = secondTransformMinute(diffSceond)
                this.setData({
                    isEnd: true,
                    beginTime,
                    endTime,
                    when
                })
                // 已经装完车了，获取台时
                let moreTaiTime = store.getItem("taiList") && store.getItem("taiList").sort((a, b) => b - a)[0]
                this.setData({
                    moreTaiTime
                })

            } else if (COMMAND === CommandType.NOTIFY_COMMAND_LOADING_COUNT) {
                this.setData({
                    isEnd: false
                })
                this.triggerEvent('activeChange', 3)
            }
        },

        // 获取时间
        async getTaiTime() {
            const factoryId = store.getItem("factoryId")
            const res = await clientGet(`${clientApi.getTaiTime}/factoryId/${factoryId}`)
            this.setData({
                taiTimeOut: res[3].vvalue
            })
        },

        startInterval() {
            let count = parseInt(this.data.taiTimeOut);
            clearInterval(this.data.intervalTimer)
            this.data.intervalTimer = setInterval(() => {
                if (count > 0) {
                    count -=1
                    this.data.taiObjList.push(this.data.materialDetail)
                } else {
                    let maps = JSON.stringify(this.data.taiObjList);
                    this.computedTaiTime(this.arrayForm(JSON.parse(maps)).length);
                    count = parseInt(this.data.taiTimeOut);
                    this.data.taiObjList = [];
                }
            }, 1000)

        },
        // 数组去重
        arrayForm(arr) {
            for (let i = 0; i < arr.length; i++) {
                for (let j = i + 1; j < arr.length; j++) {
                    if (arr[i].count === arr[j].count) {
                        //第一个等同于第二个，splice方法删除第二个
                        arr.splice(j, 1);
                        j--;
                    }
                }
            }
            return arr.sort((a, b) => a.count - b.count);
        },


        // 保存台时
        computedTaiTime(count) {
            let taiList = store.getItem("taiList") || []
            let weight = this.data.trueWuMessage.weight;
            let tai = (weight * count * 0.001 * 3600) / ~~this.data.taiTimeOut;
            taiList.push(parseInt(tai));

            store.setItem("taiList", taiList);
        },

        // 获取当前车道的任务信息
        async getTaskMessage() {
            const factoryId = store.getItem("factoryId")
            const laneId = store.getItem('laneId')
            const res = await clientGet(`${clientApi.getTaskMessage}/factoryId/${factoryId}/laneId/${laneId}`)
            this.setData({
                taskMessage: res
            })
        },
        // 获取设备信息设置Canvas容器宽度
        getSystemSetWidth() {
            let myCanvasWidth = 0
            let myCanvasHeight = 0
            wx.getSystemInfo({
                success: (result) => {
                    myCanvasWidth = result.windowWidth
                    myCanvasHeight = result.windowHeight
                }
            })
            this.setData({
                canvasWidth: myCanvasWidth,
                canvasHeight: myCanvasHeight
            })
        },
        // 绘制直视图物料
        drawDirectMaterial(materialDetail) {
            let height =
                Math.round((this.data.trueWuMessage.height / this.data.multiple) * 100) / 100;
            let width = materialDetail.packageType
                ? this.data.trueWuMessage.length / this.data.multiple
                : this.data.trueWuMessage.width / this.data.multiple;
            let canvasHeight = 338;
            let coordinateY = this.data.car.coordinateY / this.data.multiple
            let bottomHeight = this.data.car.bottomHeight / this.data.multiple
            let houVal = height * materialDetail.layer;
            let weiX = this.data.weiX / this.data.multiple
            let x = materialDetail.y / this.data.multiple + weiX - coordinateY - width / 2;
            let y = canvasHeight - bottomHeight - houVal;
            let material = new zrender.Rect({
                shape: {
                    x: transformByWidth(x),
                    y: transformByWidth(y),
                    width: transformByWidth(width)-0.6,
                    height: transformByWidth(height)-0.6
                },
                style: {
                    fill: this.color(materialDetail.layer),
                    lineWidth: 0.5,
                    stroke: "#fff"
                }
            })

            zhi.add(material)
        },
        // 绘制俯视图物料
        drawPlanMaterial(materialDetail) {
            let height = materialDetail.packageType
                ? this.data.trueWuMessage.width / this.data.multiple
                : this.data.trueWuMessage.length / this.data.multiple;
            let width = materialDetail.packageType
                ? this.data.trueWuMessage.length / this.data.multiple
                : this.data.trueWuMessage.width / this.data.multiple;
            let coordinateX = this.data.car.coordinateX / this.data.multiple
            let coordinateY = this.data.car.coordinateY / this.data.multiple
            let weiX = this.data.weiX / this.data.multiple
            let weiY = this.data.weiY / this.data.multiple
            let x = materialDetail.y / this.data.multiple - width / 2 + weiX - coordinateY;
            let y = materialDetail.x / this.data.multiple - height / 2 + weiY - coordinateX;
            let material = new zrender.Rect({
                name: `${materialDetail.layer}-${materialDetail.row}`,
                description: materialDetail,
                shape: {
                    x: transformByWidth(x),
                    y: transformByWidth(y),
                    width: transformByWidth(width) - 0.6,
                    height: transformByWidth(height) - 0.6
                },
                style: {
                    fill: this.color(materialDetail.layer),
                    lineWidth: 0.3,
                    stroke: "#fff"
                }
            })
            fu.add(material)
        },
        drawPlanform() {
            fr = zrhelper.createZrender('planform', this.data.canvasWidth, 250, this);
            let length = Math.round(this.data.car.length / this.data.multiple)
            let width = Math.round(this.data.car.width / this.data.multiple)
            let cleft = Math.round(this.data.car.cleft / this.data.multiple)
            let cright = Math.round(this.data.car.cright / this.data.multiple)
            let acenter = Math.round(this.data.car.acenter / this.data.multiple)
            let type = this.data.car.type
            let x = Math.round(this.data.weiX / this.data.multiple)
            let y = Math.round(this.data.weiY / this.data.multiple)
            let headWidth = Math.round(2000 / this.data.multiple)
            let jianjuX = x - 15
            let car1 = new zrender.Rect({
                shape: {
                    width: transformByWidth(length),
                    height: transformByWidth(width),
                    r: transformByWidth(5),
                    x: transformByWidth(x),
                    y: transformByWidth(y)
                },
                style: {
                    lineWidth: 2,
                    // stroke: "rgba(5, 49, 105, 0)",
                    stroke: "#0065FF",
                    fill: "none"
                }
            })
            let car2 = new zrender.Polyline({
                shape: {
                    points: [
                        [transformByWidth(jianjuX - headWidth), transformByWidth(y)],
                        [transformByWidth(jianjuX), transformByWidth(y)],
                        [transformByWidth(jianjuX), transformByWidth(y + width)],
                        [transformByWidth(jianjuX - headWidth), transformByWidth(y + width)]
                    ]
                },
                style: {
                    fill: "none",
                    lineWidth: 2,
                    stroke: "#0065FF"
                }
            })
            let car4 = new zrender.Polyline({
                shape: {
                    points: [
                        [transformByWidth(jianjuX - headWidth + 35), transformByWidth(y + 25)],
                        [transformByWidth(jianjuX - 35), transformByWidth(y + 25)],
                        [transformByWidth(jianjuX - 35), transformByWidth(y + width - 25)],
                        [transformByWidth(jianjuX - headWidth + 35), transformByWidth(y + width - 25)]
                    ]
                },
                style: {
                    fill: "none",
                    lineWidth: 2,
                    stroke: "#0065FF"
                }
            })
            let car3 = new zrender.BezierCurve({
                shape: {
                    x1: transformByWidth(jianjuX - headWidth),
                    x2: transformByWidth(jianjuX - headWidth),
                    y1: transformByWidth(y),
                    y2: transformByWidth(y + width),
                    cpx1: transformByWidth(jianjuX - headWidth - 20),
                    cpy1: transformByWidth(y + width / 2)
                },
                style: {
                    fill: "none",
                    lineWidth: 2,
                    stroke: "#0065FF"
                }
            })

            let car5 = new zrender.BezierCurve({
                shape: {
                    x1: transformByWidth(jianjuX - headWidth + 35),
                    x2: transformByWidth(jianjuX - headWidth + 35),
                    y1: transformByWidth(y + 25),
                    y2: transformByWidth(y + width - 25),
                    cpx1: transformByWidth(jianjuX - headWidth + 15),
                    cpy1: transformByWidth(y + width /2)
                },
                style: {
                    fill: "none",
                    lineWidth: 2,
                    stroke:"#0065FF"
                }
            })
            let car6 = new zrender.BezierCurve({
                shape: {
                    x1: transformByWidth(jianjuX - headWidth + 15),
                    x2: transformByWidth(jianjuX - headWidth - 2),
                    y1: transformByWidth(y),
                    y2: transformByWidth(y + 15),
                    cpx1: transformByWidth(jianjuX - headWidth + 15),
                    cpy1: transformByWidth(y + 15)
                },
                style: {
                    fill: "none",
                    lineWidth: 2,
                    stroke: "#0065FF"
                }
            })
            let car7 = new zrender.BezierCurve({
                shape: {
                    x1: transformByWidth(jianjuX - headWidth + 15),
                    x2: transformByWidth(jianjuX - headWidth - 2),
                    y1: transformByWidth(y + width),
                    y2: transformByWidth(y + width - 15),
                    cpx1: transformByWidth(jianjuX - headWidth + 15),
                    cpy1: transformByWidth(y + width - 15)
                },
                style: {
                    fill: "none",
                    lineWidth: 2,
                    stroke: "#0065FF"
                }
            })

            if (type === "VEHICLE_TYPE_C") {
                let car8 = new zrender.Polyline({
                    shape: {
                        points: [
                            [transformByWidth(jianjuX + cright +15), transformByWidth(y-7.5)],
                            [transformByWidth(jianjuX + 7.5), transformByWidth(y - 7.5)],
                            [transformByWidth(jianjuX + 7.5), transformByWidth(y + width + 7.5)],
                            [transformByWidth(jianjuX + cleft + 7.5 + 15), transformByWidth(y + width + 7.5)]
                        ]
                    },
                    style: {
                        fill: "none",
                        lineWidth: 2,
                        stroke: "#0065FF"
                    }
                })
                fu.add(car8)
            }

            if(type === "VEHICLE_TYPE_CONCAVE") {
                let car9 = new zrender.Rect({
                    shape: {
                        x:transformByWidth(x),
                        y: transformByWidth(y + width / 2-(670 / this.data.multiple) *0.5*0.5),
                        width: transformByWidth(acenter),
                        height:transformByWidth( 670 / this.data.multiple) * 0.5
                    },
                    style: {
                        fill: "#fff",
                        lineWidth: 0,
                        stroke: "#fff"
                    }
                })
                fu.add(car9)
            }
            fu.add(car1)
            fu.add(car2)
            fu.add(car3)
            fu.add(car4)
            fu.add(car5)
            fu.add(car6)
            fu.add(car7)
            fr.add(fu)
        },
        drawDirectViewImage() {
            // 初始化一个画布 指定画布id和宽高
            zr = zrhelper.createZrender('directViewImage', this.data.canvasWidth, 340, this);
            let canvasHeight = 338
            let length = Math.round(this.data.car.length / this.data.multiple)
            let bottomHeight = Math.round(this.data.car.bottomHeight / this.data.multiple)
            let height = Math.round(this.data.car.height / this.data.multiple)
            let headerHeight = Math.round(this.data.car.headerHeight / this.data.multiple)
            let cleft = Math.round(this.data.car.cleft / this.data.multiple)
            let tailHeight = Math.round(this.data.car.tailHeight / this.data.multiple)
            let headWidth = Math.round(2000 / this.data.multiple)
            let carriage = Math.round(this.data.carriage / this.data.multiple)
            let x = Math.round(this.data.weiX / this.data.multiple)
            let y = canvasHeight - bottomHeight  - height
            let topLine = new zrender.Polyline({
                shape: {
                    points: [
                        [transformByWidth(0), transformByWidth(0)],
                        [transformByWidth(1180), 0],
                        [transformByWidth(1180), 0],
                        [transformByWidth(0), transformByWidth(5)],
                        [transformByWidth(0), transformByWidth(0)]
                    ]
                },
                style: {
                    lineWidth: 4,
                    stroke: "red"
                }
            })
            zhi.add(topLine)
            // 车厢 √
            let carCompartment = new zrender.Rect({
                shape: {
                    x: transformByWidth(x),
                    y: transformByWidth(y),
                    width: transformByWidth(length),
                    height: transformByWidth(height)
                },
                style: {
                    fill: "none",
                    lineWidth: 2,
                    stroke: "#0065FF"
                }
            });
            if (this.data.car.type === "VEHICLE_TYPE_C") {
                let carKou = new zrender.Rect({
                    shape: {
                        x: transformByWidth(x),
                        y: transformByWidth(canvasHeight - headerHeight + 1),
                        width: transformByWidth(cleft),
                        height: transformByWidth(y - (canvasHeight - headerHeight) - 1)
                    },
                    style: {
                        fill: '#ffff85',
                        lineWidth: 0,
                        stroke:"#0065FF"
                    }
                })
                zhi.add(carKou)
            }
            // 车尾
            let carTail = new zrender.Rect({
                shape: {
                    x: transformByWidth(x + length),
                    y: transformByWidth(canvasHeight - tailHeight),
                    width: transformByWidth(5),
                    height: transformByWidth(canvasHeight - bottomHeight - (canvasHeight - tailHeight))
                },
                style: {
                    fill: "#0065FF",
                    lineWidth: 0,
                    stroke: "#0065FF"
                }
            });
            // 车头
            let carHead = new zrender.Polyline({
                shape: {
                    points: [
                        [transformByWidth(x), transformByWidth(canvasHeight - bottomHeight)],
                        [transformByWidth(x), transformByWidth(canvasHeight - headerHeight)],
                        [transformByWidth(x - headWidth*0.75), transformByWidth(canvasHeight - headerHeight)],
                        [transformByWidth(x - headWidth), transformByWidth(y)],
                        [transformByWidth(x-headWidth), transformByWidth(canvasHeight - bottomHeight / 2)],
                        [transformByWidth(x-headWidth*0.5), transformByWidth(canvasHeight - bottomHeight / 2)]
                    ]
                },
                style: {
                    lineWidth: 2,
                    stroke: "#0065FF"
                }
            })
            // 绘制车门弧度
            let carDoor = new zrender.BezierCurve({
                shape: {
                    cpx1: transformByWidth(x - headWidth * 0.4),
                    cpy1: transformByWidth(canvasHeight - bottomHeight),
                    x1: transformByWidth(x - headWidth * 0.5),
                    y1: transformByWidth(canvasHeight - bottomHeight / 2),
                    x2: transformByWidth(x),
                    y2: transformByWidth(canvasHeight - bottomHeight)
                },
                style: {
                    lineWidth: 2,
                    stroke: "#0065FF"
                }
            })
            // 绘制车前外轮
            let forwardWheel = new zrender.Circle({
                shape: {
                    cx: transformByWidth(x),
                    cy: transformByWidth(canvasHeight - carriage / 2),
                    r: transformByWidth( carriage / 2)
                },
                style: {
                    lineWidth: 2,
                    stroke: "#0065FF",
                    fill: "none"
                }
            })
            // 绘制车前内轮
            let forwardWheelInner = new zrender.Circle({
                shape: {
                    cx: transformByWidth(x),
                    cy: transformByWidth(canvasHeight - carriage / 2),
                    r: transformByWidth(carriage / 4)
                },
                style: {
                    lineWidth: 2,
                    stroke:"#0065FF",
                    fill: "none"
                }
            })
            // 绘制车后外轮
            let afterWheel = new zrender.Circle({
                shape: {
                    cx: transformByWidth(x + length * 0.75),
                    cy: transformByWidth(canvasHeight - carriage / 2),
                    r: transformByWidth(carriage / 2)
                },
                style: {
                    lineWidth: 2,
                    stroke: "#0065FF",
                    fill: "none"
                }
            })
            // 绘制车后内轮
            let afterWheelInner = new zrender.Circle({
                shape: {
                    cx: transformByWidth(x + length * 0.75),
                    cy: transformByWidth(canvasHeight - carriage / 2),
                    r: transformByWidth(carriage / 4)
                },
                style: {
                    lineWidth: 2,
                    stroke: "#0065FF",
                    fill: "none"
                }
            })
            // 绘制车窗
            let carWindow = new zrender.Rect({
                shape: {
                    height: transformByWidth(canvasHeight - bottomHeight - (canvasHeight - headerHeight) - 40),
                    r: transformByWidth(15),
                    width: transformByWidth(headWidth * 0.5),
                    x: transformByWidth(x - headWidth * 0.65),
                    y: transformByWidth(canvasHeight - headerHeight + 20)
                },
                style: {
                    lineWidth: 2,
                    stroke: "#0065FF",
                    fill: "none"
                }
            })
            // 将圆形添加到我们的画布中
            zhi.add(carCompartment)
            zhi.add(carTail)
            zhi.add(carHead)
            zhi.add(carDoor)
            zhi.add(forwardWheel)
            zhi.add(forwardWheelInner)
            zhi.add(afterWheel)
            zhi.add(afterWheelInner)
            zhi.add(carWindow)
            zr.add(zhi)
        },
        // 绘制机头
        drawMachineHead(materialDetail) {
            let width = 2600 / this.data.multiple
            let height = 1060 / this.data.multiple - 2
            let coordinateY = this.data.car.coordinateY / this.data.multiple
            let weiX = this.data.weiX / this.data.multiple
            let x = materialDetail.y / this.data.multiple + weiX - width / 2 - coordinateY
            let y = this.data.cHeight / this.data.multiple - materialDetail.z / this.data.multiple - height - 1
            // 找到上一个我们绘制的机头 予以移除
            let previousMachineHead = zhi.children().find(data => data.name === "machineHead")
            if (previousMachineHead) {
                zhi.remove(previousMachineHead)
            }
            let MachineHeadArea = new zrender.Rect({
                shape: {
                    x: transformByWidth(x + 20),
                    y: transformByWidth(y),
                    width: transformByWidth(width),
                    height: transformByWidth(height)
                },
                style: {
                    stroke: "#0065FF",
                    fill: "#E9F1FE"
                }
            })
            let MachineHeadLeft = new zrender.Rect({
                shape: {
                    width: transformByWidth(6),
                    height: transformByWidth(y - 8),
                    x: transformByWidth(x+32),
                    y: transformByWidth(8)
                },
                style: {
                    stroke: "#0065FF",
                    fill: "#fff"
                }
            })
            let MachineHeadRight = new zrender.Rect({
                shape: {
                    width: transformByWidth(8),
                    height: transformByWidth(y - 8),
                    x: transformByWidth(x + width),
                    y: transformByWidth(8)
                },
                style: {
                    stroke: "#0065FF",
                    fill: "#fff"
                }
            })
            let machineHead = new zrender.Group()
            machineHead.add(MachineHeadArea)
            machineHead.add(MachineHeadLeft)
            machineHead.add(MachineHeadRight)
            machineHead.name = 'machineHead'
            zhi.add(machineHead)
        },
        initValue() {
                if (this.data.car.width >= 3500) {
                    this.setData({
                        multiple: 17,
                        cHeight2: 4800
                    })
                } else if (this.data.car.width>= 3000 && this.data.car.width < 3500) {
                    this.setData({
                        multiple: 16.5,
                        cHeight2: 4300
                    })
                }
                if (this.data.car.headerHeight > 3000) {
                    this.setData({
                        multiple: 18,
                        cHeight: 5500
                    })
                }
                if (this.data.car.bottomHeight < 1000) {
                    this.setData({
                        carriage: this.data.car.bottomHeight
                    })
                }
        },
    },
    lifetimes: {
        attached() {
            this.init()
        },
        detached() {
            zr = null;
            fr = null;
            zhi.removeAll()
            fu.removeAll()
            clearInterval(this.data.intervalTimer)
        }
    },
});
